<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>打卡界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css"  media="all" th:href="@{/static/layui/css/layui.css}">
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=a19468fd7cfb29366a79b00b7ba964a1"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        .first {
            width: 49.5%;
            float:left;
            height: max-content;

            /*background: #E9E7E7;*/

            /*height: 100px;*/
            /*border: 1px solid #3B6273;*/
        }
        .center {
            width: 1%;
            float:left;
            height: max-content;
            /*background: #E9E7E7;*/
            /*height: 100px;*/
            /*border: 1px solid #3B6273;*/
        }
        .second {
            width: 49.5%;
            float:left;
            height: max-content;
            /*border: 1px solid #3B6273;*/
        }
    </style>
</head>
<body style="background-color:#a6e1ec">
<blockquote class="layui-elem-quote layui-text">
    <a href="#"  style="color: red">今日打卡</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/historyRecord">历史记录</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/personal">修改密码</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/myCard">负责患者</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/myDuty">重点监护</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/logout">退出</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/allShow">今日打卡现状&留言反馈</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/global">国内疫情现状-视图总览</a>
</blockquote>
<div class="first" style="width: 30%">
&nbsp;
</div>
<div class="first" style="background: #FFF8DC; box-shadow: 2px 2px 5px #bbb; width: 38%">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>今日打卡</legend>
    </fieldset>
    <form class="layui-form" th:action="@{/submit}" th:each="card:${cards}">

        <div class="layui-form-item" th:text="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+${msg}" th:if="${not #strings.isEmpty(msg)}"></div>

        <div class="layui-form-item">
            <label class="layui-form-label">工号：</label>
            <div class="layui-input-block">
                <input type="text"
                       th:value="${card.getWorkerId()}"
                       name="workerId"
                       required
                       lay-verify="workerId"
                       placeholder="请输入工号"
                       autocomplete="off"
                       class="layui-input"
                       style="width: 500px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名：</label>
            <div class="layui-input-block">
                <input style="width: 500px" type="text" th:value="${card.getName()}" name="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身体情况：</label>
            <div class="layui-input-block" style="width: 500px">
                <select th:value="${card.getBodyState()}" name="bodyState" lay-verify="required">
                    <option value=""></option>
                    <option th:selected="${card.getBodyState()=='0'}" value="0">健康</option>
                    <option th:selected="${card.getBodyState()=='1'}" value="1">有发烧、咳嗽、咽痛、腹泻、乏力、鼻塞、流涕等症状</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">健康码状态：</label>
            <div class="layui-input-block" style="width: 500px">
                <select th:value="${card.getHeathCodeState()}"  name="heathCodeState" lay-verify="required">
                    <option value=""></option>
                    <option th:selected="${card.getBodyState()=='0'}" value="0">绿色</option>
                    <option th:selected="${card.getBodyState()=='1'}" value="1">黄色</option>
                    <option th:selected="${card.getBodyState()=='2'}" value="2">红色</option>
                    <option th:selected="${card.getBodyState()=='3'}" value="3">其它</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">近14天内是否去过中高风险地区：</label>
            <div class="layui-input-block">
                <input type="radio" th:checked="${card.getInDangerousPlace()=='1'}" name="inDangerousPlace" value="1" title="是">
                <input type="radio" th:checked="${card.getInDangerousPlace()=='0'}" name="inDangerousPlace" value="0" title="否" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">当前体温(℃)：</label>
            <div class="layui-input-block">
                <input style="width: 500px" type="text" th:value="${card.getTemperatureToday()}" name="temperatureToday" required  lay-verify="temperatureToday" placeholder="输入格式：00.0" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">居住地址：</label>
            <div class="layui-input-block">
                <input id="get_location"  style=" width: 500px; background: #E9E7E7" type="text" name="addressOfHome" required  lay-verify="required" placeholder="格式：省-市-镇/区-(详细地址)" autocomplete="off" class="layui-input">
                <div class>
                    <!--                <button style="background: #E9E7E7" value="获取定位" href="/ll">获取定位</button>-->
                    <label>【提示：后台已经调用百度地图获取定位，如果不准确，请自行修改编辑】</label>
                </div>
            </div>
        </div>
        <script>
            var btn
        </script>

        <div class="layui-form-item">
            <label class="layui-form-label">联系方式：</label>
            <div class="layui-input-block">
                <input style="width: 500px" type="text" th:value="${card.getPhoneNumber()}" name="phoneNumber" required  lay-verify="phoneNumber" placeholder="11位数字" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">补充：</label>
            <div class="layui-input-block">
                <textarea style="width: 500px" name="extend" th:value="${card.getExtend()}" placeholder="请输入内容(选填)" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置到进入时状态</button>
            </div>
        </div>
    </form>
</div>



<script type="text/javascript">
    var mapObj = new AMap.Map('iCenter');
    mapObj.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            timeout: 10000,           // 超过10秒后停止定位，默认：无穷大
            maximumAge: 0,            // 定位结果缓存0毫秒，默认：0
            convert: true,            // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true,         // 显示定位按钮，默认：true
            buttonPosition: 'LB',     // 定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true,         // 定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true,         // 定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true,      // 定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy:true       // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });
        mapObj.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete); // 返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);       // 返回定位出错信息
    });

    function onComplete(obj){
        var res = '定位详情：'+
            '\n经纬度：' + obj.position +
            '\n精度范围：' + obj.accuracy +
            '米\n定位结果的来源：' + obj.location_type +
            '\n状态信息：' + obj.info +
            '\n地址：' + obj.formattedAddress +
            '\n地址信息：' + JSON.stringify(obj.addressComponent, null, 4);
        // alert(res);
        var elementById = document.getElementById("get_location");
        elementById.value = obj.formattedAddress;
    }
    function onError(obj) {
        alert(obj.info + '--' + obj.message);
        console.log(obj);
    }

</script>

<script src="/static/js/jquery-1.11.3.min.js" th:src="@{/static/js/jquery-1.11.3.min.js}"></script>
<script src="/static/layui/layui.all.js" th:src="@{/static/layui/layui.all.js}"></script>
<script src="/static/js/util.js" th:src="@{/static/js/util.js}"></script>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>


<script src="/static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use('form', function(){
        var form = layui.form;
        form.render();
    });

    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            temperatureToday: function (value) {
                if (value.length === 4
                    &&value.charAt(2) === '.'
                    && value.charAt(0) <= '9'&& value.charAt(0) >= '0'
                    && value.charAt(1) <= '9'&& value.charAt(1) >= '0'
                    && value.charAt(3) <= '9'&& value.charAt(3) >= '0'){
                }else {
                    return '温度格式不合法！请按提示要求。';
                }
            },
            phoneNumber: function (value){
                if(value.length === 11
                    && value.charAt(0) <= '9'&& value.charAt(0) >= '0'
                    && value.charAt(1) <= '9'&& value.charAt(1) >= '0'
                    && value.charAt(2) <= '9'&& value.charAt(2) >= '0'
                    && value.charAt(3) <= '9'&& value.charAt(3) >= '0'
                    && value.charAt(4) <= '9'&& value.charAt(4) >= '0'
                    && value.charAt(5) <= '9'&& value.charAt(5) >= '0'
                    && value.charAt(6) <= '9'&& value.charAt(6) >= '0'
                    && value.charAt(7) <= '9'&& value.charAt(7) >= '0'
                    && value.charAt(8) <= '9'&& value.charAt(8) >= '0'
                    && value.charAt(9) <= '9'&& value.charAt(9) >= '0'
                    && value.charAt(10) <= '9'&& value.charAt(10) >= '0'){
                }else {
                    return '手机号码格式错误！（11位数字）';
                }
            },
            workerId: function (value){
                if (value.length === 7
                    && value.charAt(0) <= '9'&& value.charAt(0) >= '0'
                    && value.charAt(1) <= '9'&& value.charAt(1) >= '0'
                    && value.charAt(2) <= '9'&& value.charAt(2) >= '0'
                    && value.charAt(3) <= '9'&& value.charAt(3) >= '0'
                    && value.charAt(4) <= '9'&& value.charAt(4) >= '0'
                    && value.charAt(5) <= '9'&& value.charAt(5) >= '0'
                    && value.charAt(6) <= '9'&& value.charAt(6) >= '0'){
                }else {
                    return '工号格式错误！（7位数字）';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });

    });
</script>


</body>
</html>